<template>
  <button class="myButton" v-if="isLinksVisible(info)" :style="'width:'+buttonWidth+'px;height:'+(buttonWidth/3)+'px'"
          :class="(activeId===info.src?'isActive':'')+' '+direction"
          @touchstart="changePNG_down" @touchend="changePNG_up" @click="jumpPage(info.src)">
    <div>
      <img v-if="info.type==='product'&&info.icon!==null" :src="(activeId===info.src&&isChangePNG)?info.icon_active:info.icon" :height="imgHeight">
      <span :style="'height:'+imgHeight+'px'">{{info.title}}</span>
    </div>
  </button>
</template>

<script>
  import {Toast} from 'vant'
    export default {
        name: "Collapse_MyProduct_Button",
      data(){
          return{
            buttonWidth:0,
            imgHeight:0,
            isChangePNG:true,
            isProductId:true,
          }
      },
      computed:{
          activeId:{
            get(){
              return this.$store.getters.getAboutUsOrOurProductsId
            },
            set(){}
          },
        lang:{
            get(){
              return this.$store.getters.getLang;
            },
          set(){}
        },
      },
      props:{
        info:{},
        direction:String,
      },
      methods:{
        isLinksVisible(data){
          if (data === undefined) {
            return false;
          }
          return true;
        },
          stopAction:function(e){
            e.stopPropagation();
            e.preventDefault();
            return false;
          },
        getScreen:function(){
          this.buttonWidth=document.body.clientWidth/3;
          this.imgHeight=this.buttonWidth/5;
        },
        changePNG_down:function () {

          this.isChangePNG=false;
          console.log( this.isChangePNG);
        },
        changePNG_up:function () {
          this.isChangePNG=true;
          console.log( this.isChangePNG);

        },
        jumpPage(){
          if(this.info.src!==null) {
            if (this.info.type === 'link' && this.info.src !== undefined) {
              window.open(this.info.src);
            } else {
              this.getProductInfo();
            }
          }else{
            Toast('null');
          }
          this.$emit('changeScroll');
          this.$store.dispatch('toChangeAboutUsOrOurProductsId',this.info.src);
        },
        //获取产品信息
        getProductInfo(){
          this.$store.dispatch('toChangeLoadIngVisible',true);
          let _this=this;
          this.axios.get(domain.url+'product/api/get_product', {
            params: {
              id:_this.info.src,
              language:_this.lang,
              equipment:'mobile'
            }
          })
            .then(function (response) {
              _this.$store.dispatch('toChangeProductIndexId', _this.info.src);
              if (response.data.status) {
                _this.$store.dispatch('toChangeCurrentPageText', response.data.product.title);
              }
              _this.$store.dispatch('toChangeProductInfo',response.data);
              _this.$store.dispatch('toChangeLoadIngVisible',false);
              _this.$router.push('/');
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      mounted(){
          this.getScreen();
      }
    }
</script>

<style scoped>
  .myButton{
    background: #fef8f8;
    border:0;
    color:#000000;
    margin-bottom: 20px;
  }
  .myButton:active{
    background:#fc6775;
    color:#FFF;
  }
  .isActive{
    background:#fc6775;
    color:#FFF;
  }
  .myButton div{
  }
  .myButton img{
    vertical-align: middle;
    z-index:1000;
    margin-right: 10px;
  }
  .myButton span{
    vertical-align: middle;
  }
  .left{
    left:30px;
    float: left;
    margin-left: 20px;
  }
  .right{
    float: right;
    right:30px;
    left:auto;
    margin-right: 20px;
  }
</style>
